<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>view/workArea/plan/workPlanMore</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/global.css">
		<link rel="stylesheet" href="../../../css/style.css">
		<link rel="stylesheet" href="../../../css/mui.picker.css">
		<link rel="stylesheet" href="../../../css/mui.poppicker.css">
		<style type="text/css">
			/* 请选择组件 */
			.task_bar {
				display: flex;
				justify-content: space-between;
				border: 1px solid #d8d8d8;
				border-radius: 35px;
			}

			.typeSel_div {
				width: 100%;
			}

			.mui-btn-block {
				font-size: 16px;
				display: block;
				width: 100%;
				margin-bottom: 0;
				padding: 0;
				border: 0;
			}

			/* 时间选择 */
			.selectDate {
				height: 25px;
			}
			/* 新ui更新 */
			.task_tit{
				margin: 10px 15px 0;
			}
			.lck_bor_gz{
				width: 80px;
				border-bottom: 2px solid #ea1e1a;
			}
			.task_info{
				box-shadow: 0 0 0 0;
				border-radius:0;
			}
			.task_bar .tsearch{
				border-left: 0;
				background: url("../../../images/icon_374.png") no-repeat center center;
				background-size: 18px;
			}
			.mui-btn-block{
				text-align: left;
			}
			.selectVisitedType{
				background: url(../../../images/icon_333.png) no-repeat left center;
				background-size: 18px;
				float: right;
				height: 50px;
				line-height: 25px;
				color: #8E8E93;
				padding-right: 0;
				text-align: right;
				border-bottom: 1px solid #d8d8d8;
			}
			.selectDateBegin{
				background: url(../../../images/icon_375.png) no-repeat left center;
				background-size: 18px;
				float: right;
				height: 50px;
				line-height: 25px;
				color: #8E8E93;
				padding-right: 0;
				text-align: right;
				border-bottom: 1px solid #d8d8d8;
			}
			.selectDateEnd{
				background: url(../../../images/icon_376.png) no-repeat left center;
				background-size: 18px;
				float: right;
				height: 50px;
				line-height: 25px;
				color: #8E8E93;
				padding-right: 0;
				text-align: right;
				border-bottom: 1px solid #d8d8d8;
			}
			.task_list{
				border-bottom: 0;
				box-shadow: 0px 0px 6px 4px #f1f1f1;
				border-radius: 10px;
				margin: 20px 5px 10px;
				padding: 1px 12px;
			}
			.task_list .name{
				border-bottom: 1px solid #ececec;
				font-size: 15px;
				height: 50px;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">计划安排</h1>
		</header>
		<div class="mui-content">
			<div class="task_tit">工作计划</div>
			<div class="lck_bor_gz"></div>
			<div class="task_info">
				<div class="task_bar">
					<div class="typeSel_div">
						<input type="hidden" id="type" name="" />
						<button id="typeSel" class="mui-btn mui-btn-block mui-btn-select" type="button">当前周</button>
					</div>
					<div class="tsearch" onclick="selectList()"></div>
				</div>
				<div class="task_bar" id="visitedPicker" style="height:auto;border: 0;padding: 0 5px;">
					<div style="display:inline-block;width: 100%;">
						<input type="hidden" id="visitedType" name="" />
						<button id="visitedTypeSel" type="button" class="selectVisitedType" style="width: 100%;">请选择拜访状态</button>
					</div>
				</div>
				<div class="task_bar" id="timePicker" style="display: none;height:auto;border: 0;padding: 0 5px;">
					<div style="display:inline-block;width: 100%;">
						<input type="hidden" id="startTimeVal" />
						<input type="hidden" id="endTimeVal" />
						<button id="startTime" type="button" class="selectDateBegin" style="width: 100%;">请选择开始时间</button>
						<button id="endTime" type="button" class="selectDateEnd" style="width: 100%;">请选择结束时间</button>
					</div>
				</div>
				<div id="taskList">
					<!-- 列表内容 -->
				</div>
			</div>
			<div class="btn_box">
				<!-- <span class="fl red one" id="cancelBtn">关闭</span> -->
			</div>
			<div style="height: 50px;"></div>
		</div>

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../js/utils/rolldate.min.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script src="../../../js/fse/service/report/phone/phone.js"></script>

		<script type="text/javascript" charset="utf-8">
			var self_type;
			var self_startTime;
			var self_endTime;
			var self_isVisited;
			var enginnerId;
			(function($, doc) {
				$.init();

				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					self_type = self.type;
					self_isVisited = self.isVisited;
					enginnerId = self.enginnerId;
					if (self_type) {
						h("#type").val(self_type);
						if (self_type == 3) {
							var self_startTime = self.startTime;
							var self_endTime = self.endTime;
							h("#timePicker").show();
							h("#startTime").html(self_startTime);
							h("#endTime").html(self_endTime);
							h("#startTimeVal").val(self_startTime);
							h("#endTimeVal").val(self_endTime);
							h("#typeSel").html("自定义");
						} else if (self_type == 2) {
							h("#typeSel").html("当前月");
						} else if (self_type == 1) {
							h("#typeSel").html("当前周");
						}
					}
					if(self_isVisited){
						h("#visitedType").val(self_isVisited);
						if(self_isVisited == '0'){
							h('#visitedTypeSel').html("未拜访")
						} else if(self_isVisited == '1'){
							h('#visitedTypeSel').html("已拜访")
						} else {
							h('#visitedTypeSel').html("全部")
						}						
					}
					
					// 日期控件
					initDateTimeControls();
					// 查询列表
					selectList();
					// 拜访状态选择框监听
					h('#visitedTypeSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						userPicker.setData([{
							value: '',
							text: '全部'
						}, {
							value: '0',
							text: '未拜访'
						}, {
							value: '1',
							text: '已拜访'
						}]);
						userPicker.show(function(items) {
							h('#visitedTypeSel').html(items[0].text)
							h('#visitedType').val(items[0].value)
							userPicker.dispose()
						});
					});
					// 日期选择框监听
					h('#typeSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						userPicker.setData([{
							value: '1',
							text: '当前周'
						}, {
							value: '2',
							text: '当前月'
						}, {
							value: '3',
							text: '自定义'
						}]);
						userPicker.show(function(items) {
							h('#typeSel').html(items[0].text)
							h('#type').val(items[0].value)
							if (items[0].value == "3") {
								h('#timePicker').show()
							} else {
								h('#timePicker').hide()
							}
							userPicker.dispose()
						});
					});
					h('#cancelBtn').tap(function() {
						$.back();
					})
				});
			}(mui, document));

			/**
			 * 查询列表
			 */
			function selectList() {
				// 查询条件
				var type = h("#type").val();
				var isVisited = h("#visitedType").val();
				var startTime = h("#startTimeVal").val();
				var endTime = h("#endTimeVal").val();
				if (type == 3) {
					if (startTime == "") {
						app.toast("请选择开始时间");
						return false;
					}
					if (endTime == "") {
						app.toast("请选择结束时间");
						return false;
					}
					
					var startDate = stringYYYYMMDDHHMMToDate(startTime).getTime();
					var endDate = stringYYYYMMDDHHMMToDate(endTime).getTime();	
					if (startDate > endDate) {
						app.toast("开始时间不能大于结束时间");
						return false;
					}
				}
				// 查询参数
				var param = {
					"type": type,
					"isVisited": isVisited,
					"startTime": startTime,
					"endTime": endTime,
					"enginnerId": enginnerId,
					"limitNum": ""
				}
				app.showWaiting('加载中...');
				// 查询post
				ajaxPost(BASE_URL + "cc/planAndCase/workPlan", param, function(data) {
					app.closeWaiting()
					// console.log(JSON.stringify(data))
					if (data.code == 200) { //查询成功
						var html = "";
						var jumpTo = "app.jumpTo('editPlan.html','view/service/editPlan.html')";
						var arr = data.data;
						if (arr.length <= 0) {
							h("#taskList").html('<div style="text-align: center;">—— 暂无数据 ——</div>');
						} else {
							for (var i = 0; i < arr.length; i++) {
								var start = "";
								var end = "";
								var date = "";
								var enddate = "";
								var startHm = "";
								var endHm = "";
								var estimated = arr[i].estimatedVisitingTime;
								var estimatedDT = arr[i].estimatedDepartureTime;
								if (estimated) {
									date = estimated.substring(0, estimated.indexOf(" ")).trim();
									enddate = estimatedDT.substring(0, estimatedDT.indexOf(" ")).trim();
									startHm = estimated.substring(estimated.indexOf(" "), estimated.length).trim();
									endHm = estimatedDT.substring(estimatedDT.indexOf(" "), estimatedDT.length).trim();
									start = new Date(date);
									end = new Date(enddate);
								}
								var week = getWeekDate(start);
								var weekEnd = getWeekDate(end);
								var planStates = arr[i].planStates;
								var stateName = getBaifang(planStates);
								html += '<div class="task_list">';
								html += '<p class="name" style="height: auto;line-height: initial;padding: 14px 0;">' + arr[i].customerName + '</p>';
								html += '<p class="name" onclick="jumpToNext(\'' + arr[i].planIds + '\', \'' + arr[i].customerName + '\')">服务单数量：<span style="color: #2188b9;font-weight: bold;">' + arr[i].countNum + '</span>单';
								if('未拜访'==stateName){
									html += ' (<span style="color:#ea1e1a;">'+ stateName +'</span>)';
								}
								else{
									html += ' (<span style="color:green;">'+ stateName +'</span>)';
								}
								html += '<span style="float: right">➫</span>';
								html += '</p>';
								if (enginnerId == app.getUser().enginnerId) {
									html += '<p class="name" onclick="jumpToUpdate(\'' + arr[i].planStates + '\', \'' + arr[i].planIds + '\', \'' + arr[i].customerName + '\', \'' + arr[i].estimatedVisitingTime + '\', \'' + arr[i].estimatedWorkingHours + '\', \'' + arr[i].estimatedDepartureTime + '\')">预计上门时间：<span style="float:right;color: #696969;">' + arr[i].estimatedVisitingTime + '&nbsp;&nbsp;&nbsp;' + week + '➫</span></p>';
									html += '<p class="name" style="border-bottom: 0;" onclick="jumpToUpdate(\'' + arr[i].planStates + '\', \'' + arr[i].planIds + '\', \'' + arr[i].customerName + '\', \'' + arr[i].estimatedVisitingTime + '\', \'' + arr[i].estimatedWorkingHours + '\', \'' + arr[i].estimatedDepartureTime + '\')">预计结束时间：<span style="float:right;color: #696969;">' + arr[i].estimatedDepartureTime + '&nbsp;&nbsp;&nbsp;' + weekEnd + '➫</span></p>';
								} else {	
									html += '<p class="name">预计上门时间：<span style="float:right;color: #696969;">' + arr[i].estimatedVisitingTime + '&nbsp;&nbsp;&nbsp;' + week + '</span></p>';
									html += '<p class="name" style="border-bottom: 0;">预计结束时间：<span style="float:right;color: #696969;">' + arr[i].estimatedDepartureTime + '&nbsp;&nbsp;&nbsp;' + weekEnd + '</span></p>';
								}
								html += '</div>';
							}
							h("#taskList").html(html);
						}
					} else { //查询失败
						h("#taskList").html('<div style="text-align: center;">—— 暂无数据 ——</div>');
						app.toast(data.msg)
					}
				}, function(errorMsg) {
					app.closeWaiting()
					h("#taskList").html('<div style="text-align: center;">—— 暂无数据 ——</div>');
					app.toast("数据获取失败，请检查网络连接");
				});
			}

			//获取是否拜访
			function getBaifang(planStates) {
				var res = "未拜访";
				var arr = planStates.split(",");
				for (var i = 0; i < arr.length; i ++) {
					if (arr[i] >= 2) {
						res = "已拜访";
						break;
					}
				}
				return res;
			}
			
			//服务单状态
			function getStateName(planStates) {
				//0待接受，1已接受，2已签到，3已签离，4已完成,5自动签离，6已拒绝
				if (planStates == 0) {
					return "待接受";
				} else if (planStates == 1) {
					return "已接受";
				} else if (planStates == 2) {
					return "已签到";
				} else if (planStates == 3) {
					return "已签离";
				} else if (planStates == 4) {
					return "已完成";
				} else if (planStates == 5) {
					return "自动签离";
				} else if (planStates == 6) {
					return "已拒绝";
				} else {
					return "";
				}
			}

			/**
			 * 初始化日期时间控件
			 */
			function initDateTimeControls() {
				// 开始时间
				new Rolldate({
					el: '#startTime',
					format: 'YYYY-MM-DD hh:mm',
					beginYear: 2015,
					endYear: 2050,
					trigger: 'click',
					lang: {
						title: '请选择开始时间',
					},
					confirm: function(date) {
						h("#startTimeVal").val(date);
					}
				})
				
				// 结束日期
				new Rolldate({
					el: '#endTime',
					format: 'YYYY-MM-DD hh:mm',
					beginYear: 2015,
					endYear: 2050,
					trigger: 'click',
					lang: {
						title: '请选择结束时间',
					},
					confirm: function(date) {
						h("#endTimeVal").val(date);
					}
				})
			}

			// 跳转下一页
			function jumpToNext(planIds, customerName) {
				app.jumpTo("/view/workArea/plan/planList.html", "view/workArea/plan/planList", {
					"planIds": planIds,
					"customerName": customerName
				});
			}

			// 跳转修改页
			function jumpToUpdate(planStates, planIds, customerName, startTime, hour, endTime) {
				var statArr = planStates.split(",");
				for (var i = 0; i < statArr.length; i ++) {
					if (statArr[i] > 1) {
						app.toast("存在已签到数据，不可修改");
						return false;
					}
				}
				app.jumpTo("/view/workArea/plan/expectedDoor.html", "view/workArea/plan/expectedDoor", {
					"planIds": planIds,
					"customerName": customerName,
					"estimatedVisitingTime": startTime,
					"estimatedWorkingHours": hour,
					"estimatedDepartureTime": endTime
				});
			}
			
		</script>
		<!-- js代码 end -->

	</body>

</html>
